<!DOCTYPE html>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="zh-CN">
<head>
    <%--定义项目路径--%>
    <script>
        const contextPath = '<%= request.getContextPath() %>';
    </script>
    <script src = '<%= request.getContextPath()%>/js/MusicPlayer.js'></script>
    <meta charset="UTF-8">
    <title>MusicPlayer</title>
    <link rel=stylesheet type="text/css" href="css/MusicPlayerStyle.css">
</head>
<body>
<div class="container">
    <!-- 左上块：带搜索的列表 -->
    <div class="left-top">
        <input type="text" id="search" class="search-bar" placeholder="搜索...">
        <ul id="item-list" class="item-list">
            <!-- 动态加载项 -->
        </ul>
    </div>

    <!-- 右上块：选中的列表 -->
    <div class="right-top">
        <div class="styled-paragraph">
            播放队列
        </div>
        <ul id="selected-list" class="selected-list">
            <!-- 动态加载选中的项 -->
        </ul>
    </div>

    <!-- 底部块：音乐播放UI -->
    <div class="bottom">
        <span id="current-song">当前播放：无</span>
        <audio id="audioPlayer" controls onended="playNextSong(true)"></audio>
        <button onclick="nextSong()" class="nextButton">下一首</button>
        <div class="loop-select">
            <select id="loopSelect">
                <option value = "ListLoop">列表循环</option>
                <option value = "ListPlay">列表播放</option>
                <option value = "Single">单曲循环</option>
                <option value = "Random">随机播放</option>
            </select>
        </div>
    </div>
</div>
</body>
</html>
